<template>
  <t-drawer
    :title="title"
    placement="right"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @close="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading">
      <tool-bar :showDivisionBar="false">
        <template slot="toolBtn" slot-scope="scope">
          <a-button class="cu-btn-primary" icon="plus" @click="handleAdd"
            >新增</a-button
          >
          <a-button
            type="link"
            shape="circle"
            icon="redo"
            @click="getPageSet"
            style="position: absolute;right: 0;"
          />
        </template>
      </tool-bar>
      <a-alert
        message="新增权限后请去【平台管理】->【系统权限】->【岗位角色权限】处给对应角色进行授权"
        banner
      />
      <div class="margin-top-xs" style="padding-bottom: 45px;">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          :scroll="scrollXY"
          :pagination="false"
        >
          <span slot="renderSerial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span slot="formAction" slot-scope="text, record, index">
            <a-tag :color="text == 'look' ? 'orange' : 'blue'">
              {{ text == "look" ? "不可查看" : "不可编辑" }}
            </a-tag>
          </span>
          <span slot="renderPermissionStatus" slot-scope="text, record, index">
            <a-tag :color="text == 'MenuStatus.01' ? 'green' : 'red'">
              {{ text == "MenuStatus.01" ? "启用" : "禁用" }}
            </a-tag>
          </span>
          <span slot="renderAction" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>
            <span class="action-margin"></span>
            <a @click="handleSub(record)" class="action-delete">删除</a>
          </span>
        </a-table>
      </div>
    </a-spin>
    <div
      :style="{
        background: 'rgba(255,255,255,1)',
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button
        :style="{ marginRight: '8px' }"
        @click="
          () => {
            $emit('cancel');
          }
        "
      >
        关闭
      </a-button>
    </div>
    <form-auth-form
      ref="formAuthForm"
      :visible="formAuthFormVisible"
      :isEdit="isEdit"
      :model="formAuthFormModel"
      @ok="formAuthFormOk"
      @cancel="formAuthFormCancel"
    />
  </t-drawer>
</template>

<script>
import formAuthForm from "./formAuthForm.vue";
export default {
  props: {
    visible: {
      type: Boolean,
      default: () => false,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {
    formAuthForm,
  },
  data() {
    return {
      title: "表单权限",
      isEdit: false,
      columns: [
        {
          title: "序号",
          align: "center",
          width: 55,
          langCode: "serialNo",
          scopedSlots: {
            customRender: "renderSerial",
          },
        },
        {
          title: "字段名称",
          dataIndex: "formName",
        },
        {
          title: "字段编码",
          dataIndex: "formCode",
        },
        {
          title: "字段操作",
          dataIndex: "formHandle",
          width: 100,
          scopedSlots: {
            customRender: "formAction",
          },
        },
        {
          title: "状态",
          dataIndex: "formStatus",
          width: 70,
          scopedSlots: {
            customRender: "renderPermissionStatus",
          },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          width: 80,
          scopedSlots: {
            customRender: "renderAction",
          },
        },
      ],
      dataSource: [],
      queryParam: {},
      formAuthFormVisible: false,
      url: {
        getPageSet: "/system/sysMenuForm/getPageSet",
        save: "/system/sysMenuForm/save",
        update: "/system/sysMenuForm/update",
        deleteBatch: "/system/sysMenuForm/deleteBatch",
        detail: "/system/sysMenuForm/getDetailByUuid",
      },
      formAuthFormModel: null,
      menuAssembly: "",
      menuUuid: "",
    };
  },
  created() {},
  computed: {
    scrollXY() {
      const tdHeight = this.dataSource?.length * 40 ?? 0;
      return { y: 600, x: 550 };
    },
  },
  methods: {
    loadData(uuid, menuName, menuAssembly) {
      this.title = "表单权限 -【" + menuName + "】";
      this.queryParam.menuUuid = uuid;
      this.menuAssembly = menuAssembly;
      this.menuUuid = uuid;
      this.getPageSet();
    },
    handleAdd() {
      this.isEdit = false;
      this.formAuthFormVisible = true;
    },
    handleEdit(record) {
      this.formAuthFormVisible = true;
      this.isEdit = true;
      this.$post(this.url.detail, {
        uuid: record.uuid,
      }).then((res) => {
        if (res.statusCode === 200) {
          this.formAuthFormModel = res.data;
        }
      });
    },
    handleSub(record) {
      const that = this;
      that.$confirm({
        title: that.$ct("tips", "提示"),
        content: that.$ct(
          "deleteConfirmationPrompt",
          "确定删除该数据吗？删除之后不可恢复！"
        ),
        okText: that.$ct("confirm", "确定"),
        cancelText: that.$ct("cancel", "取消"),
        closable: true,
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that
            .$post(that.url.deleteBatch, { uuid: record.uuid })
            .then((res) => {
              if (res.statusCode === 200) {
                that.getPageSet();
                that.$message.success(res.message, 1.5);
              } else {
                that.$message.error(res.message, 1.5);
              }
            });
        },
        onCancel() {},
      });
    },
    getPageSet() {
      this.$post(this.url.getPageSet, this.queryParam).then((res) => {
        if (res.statusCode === 200) {
          this.dataSource = res.data.rows;
        }
      });
    },
    formAuthFormOk() {
      const form = this.$refs.formAuthForm.form;
      this.confirmLoading = true;
      form.validateFields((errors, values) => {
        if (!errors) {
          let url;
          if (!values.uuid) {
            url = this.url.save;
          } else {
            url = this.url.update;
          }
          values.menuUuid = this.menuUuid;
          values.component = this.menuAssembly;
          this.$post(url, values)
            .then((res) => {
              if (res.statusCode === 200) {
                this.formAuthFormVisible = false;
                this.getPageSet();
                this.$message.success(res.message, 1.5);
              } else {
                this.$message.error(res.message, 1.5);
              }
            })
            .finally(() => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
        }
      });
    },
    formAuthFormCancel() {
      this.formAuthFormVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/div[class^="ant-table-wrapper"] .ant-table .ant-table-tbody tr,
div[class^="ant-table-wrapper"] .ant-table .ant-table-thead tr {
  height: 40px !important;
}
/deep/.ant-table-row-cell-ellipsis,
.ant-table-row-cell-ellipsis .ant-table-column-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/.ant-table-tbody > tr > td,
/deep/.ant-table-thead > tr > th {
  padding: 0 8px !important;
}
</style>
